<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>姚留洋的私人图床</title>
    <link href="favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link rel="stylesheet" href="static/css/style.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/Vidage/0.1.2/styles/Vidage.css" />
    <link rel="stylesheet" href="https://cdn.bootcss.com/ionicons/4.5.6/collection/icon/icon.css">
    <link href="static/dist/mfb.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="static/css/fileinput.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="static/js/fileinput.min.js"></script>
    <script type="text/javascript" src="static/js/fileinput_locale_zh.js"></script>
    <script src="https://cdn.bootcss.com/clipboard.js/2.0.4/clipboard.min.js"></script>
<!--[if IE]>
	<script src="https://cdn.bootcss.com/html5shiv/3.7.0/html5shiv-printshiv.min.js"></script>
<![endif]-->
</head>
<body>
    <!-- Vidage sample structure -->
    <div class="Vidage">
      <div class="Vidage__image"></div>
      <video id="VidageVideo" class="Vidage__video" preload="metadata" loop autoplay muted>
         <source src="static/videos/bj.mp4" type="video/mp4">
         </video>
     </div>
     <div class="cs">
       <br>
       <img src="static/dist/images/logo.jpg" id="logo">
       <h1>图片保存</h1>
       <h3>何を見ていますか？写真をアップロードします。-KIENG</h3>
   </div>
   <form enctype="multipart/form-data" style="margin: 0 auto;width: 80%">
    <div class="form-group">
        <input id="smfile" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="1" data-max-file-count="10" name="image" accept="image/*">
    </div>
</form>
<div id="showurl" style="display: none;margin: 0 auto;width: 80%">
    <ul id="navTab" class="nav nav-tabs">
        <li class="active"><a href="#urlcodes" data-toggle="tab">URL</a></li>
        <li><a href="#htmlcodes" data-toggle="tab">HTML</a></li>
        <li><a href="#bbcodes" data-toggle="tab">BBCode</a></li>
        <li><a href="#markdowncodes" data-toggle="tab">Markdown</a></li>
        <li><a href="#markdowncodes2" data-toggle="tab">Markdown with Link</a></li>
    </ul>
    <div id="navTabContent" class="tab-content">
        <div class="tab-pane fade in active" id="urlcodes">
            <pre style="margin-top: 5px;"><code id="urlcode" data-clipboard-text="1" onclick="copy(this)"></code></pre>
        </div>
        <div class="tab-pane fade" id="htmlcodes">
            <pre style="margin-top: 5px;"><code id="htmlcode" data-clipboard-text="2" onclick="copy(this)"></code></pre>
        </div>
        <div class="tab-pane fade" id="bbcodes">
            <pre style="margin-top: 5px;"><code id="bbcode" onclick="copy(this)"></code></pre>
        </div>
        <div class="tab-pane fade" id="markdowncodes">
            <pre style="margin-top: 5px;"><code id="markdown" onclick="copy(this)"></code></pre>
        </div>
        <div class="tab-pane fade" id="markdowncodes2">
            <pre style="margin-top: 5px;"><code id="markdownlinks" onclick="copy(this)"></code></pre>
        </div>
    </div>
</div>

<!-- Vidage init -->
<script src="https://cdn.bootcss.com/Vidage/0.1.2/scripts/Vidage.min.js"></script>
<script>
  new Vidage('#VidageVideo');
</script>
<script type="text/javascript">
    function copy(obj){
        new Clipboard('.tab-content', {
        text: function(trigger) {
           return trigger.getAttribute($(obj).html());
       }
   });
   }
</script>
<script>
    $("#smfile").fileinput({
        // uploadUrl: 'https://www.freeapi.me/upload.html?type=ali',
        uploadUrl: "api/upload",
        allowedFileExtensions : ['jpeg', 'jpg', 'png', 'gif', 'bmp'],
        overwriteInitial: false,
        maxFileSize: 5120,
        maxFilesNum: 10,
        maxFileCount: 10,
    });
    $('#smfile').on('fileuploaded', function(event, data, previewId, index) {
        var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader;
        if(response.code === '200') {
            var image_url=response.data.data.url;
            var file_name=response.data.data.filename
            if ($("showurl").css("display")) {
                $('#urlcode').append(image_url + "\n");
                $('#htmlcode').append("&lt;img src=\""+image_url +"\" alt=\""+ file_name +"\" title=\""+ file_name +"\" /&gt;" + "\n");
                $('#bbcode').append("[img]"+ image_url +"[/img]" + "\n");
                $('#markdown').append("!["+file_name +"](" + image_url+ ")" + "\n");
                $('#markdownlinks').append("[!["+ file_name +"](" +image_url + ")]" +"(" + image_url + ")" + "\n");

            } else if (image_url) {
                $("#showurl").show();
                $('#urlcode').append(image_url + "\n");
                $('#htmlcode').append("&lt;img src=\""+ image_url +"\" alt=\""+ file_name +"\" title=\""+ file_name +"\" /&gt;" + "\n");
                $('#bbcode').append("[img]"+ image_url +"[/img]" + "\n");
                $('#markdown').append("!["+ file_name +"](" + image_url + ")" + "\n");
                $('#markdownlinks').append("[!["+ file_name +"](" + image_url + ")]" +"(" + image_url + ")" + "\n");
            }
        }
    });
</script>
<audio autoplay loop>
    <source src="https://win-web-rf01-sycdn.kuwo.cn/10e151d11de814a5a880904befaa535f/5ef2fd55/resource/n2/18/97/1835851212.mp3" type="audio/mpeg">
    </audio>
</body>
</html>
